<template>
  <div>
    <!-- 本质上就是vue帮我们做了一层包装
      v-model value属性和input事件
      lol qwer 
      拳皇格斗游戏 搓招 上下左右a
      v-model相当于一键必杀
      v-model = value属性 + input事件 结合
       value是属性 需要通过v-bind绑定
       input事件 需要通过v-on监听
     -->
    <h1>v-model语法糖学习</h1>
    <!-- v-model普通的语法糖
      :value
      @input
     -->
    <!-- <input type="text" v-model="msg" /> -->
    <!-- 原生表单input事件 表单输入变化后触发 -->
    <!-- <input type="text" v-bind:value="msg" v-on:input="handleInput" />
    <br />
    {{ msg }} -->
    <!-- 
      lazy修饰符 本质就是把input事件改成change事件
      :value
      @change
     -->
    <!-- <input type="text" v-model.lazy="msg" /> -->
    <!-- $event在这里指的就是事件对象 业务逻辑可以直接简写 -->
    <input type="text" :value="msg" @change="msg = $event.target.value" />

    <!-- {{ count }}
    <button @click="count += 2">点击</button> -->

    <!-- v-model在checkbox的语法糖
      语法糖 = checked属性 change事件
     -->
    <!-- 是否帅气 <input type="checkbox" v-model="flag" /> -->
    是否帅气
    <input
      type="checkbox"
      :checked="flag"
      @change="flag = $event.target.checked"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world haha",
      count: 0,
      flag: true,
    };
  },
  methods: {
    handleInput(e) {
      console.log(e.target.value);
      this.msg = e.target.value;
    },
    handleChange(e) {
      this.msg = e.target.value;
    },

    // handleCheckChange(e) {
    //   console.dir(e.target.checked);
    //   this.flag = e.target.checked;
    // },
  },
};
</script>

<style>
</style>
